<script setup>
import {onBeforeMount, ref} from "vue";
import FooterNav from "@/components/footerNav.vue";
import router from "@/router/index.js";
import {getKnowledgeBaseByUserId, getRecommendedArticles, getUserJoinedKnowledgeBase} from "@/api/request.js";
import {useUserStore} from "@/store/user.js";
import KnowledgeBaseItem from "@/components/knowledgeBaseItem.vue";
import axios from "axios";
import ArticleItem from "@/components/articleItem.vue";
import {showToast} from "vant";

const store = useUserStore()
const knowledgeBase = {
  id: 0,
  name: '',
  icon: '',
  backgroundColor: ''
}

const article = {
  id: 0,
  title: '',
}

const user = {
  id: 0,
  username: '',
  avatar: ''
}

const RealArticle = {
  article: article,
  user: user,
  knowledgeBases: [knowledgeBase]
}
const publicKnowledgeBases = ref([knowledgeBase]) // 公共知识库列表
const myKnowledgeBases = ref([knowledgeBase]) // 我加入的知识库列表
const recommendedArticles = ref([RealArticle]) // 推荐文章列表

// 在组件创建前，获取公共知识库列表、我加入的知识库列表、推荐文章列表
onBeforeMount(async () => {
  await axios.all([
    getKnowledgeBaseByUserId({userId: 1}),
    getRecommendedArticles({userId: store.userId || 0})
  ]).then(axios.spread((...res) => {
    publicKnowledgeBases.value = res[0].data
    recommendedArticles.value = res[1].data

    console.log(recommendedArticles.value)
  })).catch(err => {
    console.log("错误 => ", err)
  })

  if (store.isAuthenticated) {
    // 获取我加入和我创建的知识库列表
    console.log(store.userId)
    await axios.all([
      getUserJoinedKnowledgeBase({
        userId: store.userId
      }),
      getKnowledgeBaseByUserId({
        userId: store.userId
      })
    ]).then(axios.spread((...res) => {
      myKnowledgeBases.value = []
      if (res[0].data !== null) {
        myKnowledgeBases.value.push(...res[0].data)
      }

      if (res[1].data !== null) {
        myKnowledgeBases.value.push(...res[1].data)
      }

      console.log(myKnowledgeBases.value)
    })).catch(err => {
      console.log("错误 => ", err)
      showToast({
        message: '获取知识库列表失败',
        position: 'bottom',
        duration: 2000
      })
      myKnowledgeBases.value = []
    })
  }
})

</script>

<template>
  <!-- 搜索框, 点击跳转到搜索页面 -->
  <van-search placeholder="请输入搜索关键词" show-action @focus="router.push('/search')"/>

  <!-- 页面主要展示区域 -->
  <div class="app-container">
    <!-- 三个板块，分别展示公共知识库、我的知识库、文章推荐 -->
    <!-- 公共知识库，系统管理员创建的知识库，包含数学、语文等基础科目 -->
    <div class="display-section">
      <span class="title">公共知识库</span>
      <van-divider/>
      <!-- 如果公共知识库列表为空，则显示提示信息-->
      <div v-if="publicKnowledgeBases.length === 0">
        <van-empty description="搜索不到数据" image="network" image-size="5rem"/>
      </div>
      <div v-else class="display-box-knowledge-base">
        <template v-for="item in publicKnowledgeBases">
          <KnowledgeBaseItem :knowledge-base="item"></KnowledgeBaseItem>
        </template>
      </div>
    </div>

    <!-- 我的知识库,我加入的知识库 -->
    <div class="display-section">
      <span class="title">我的知识库</span>
      <van-divider/>
      <!-- 如果用户未登录，则显示提示信息,否则显示我的知识库列表 -->
      <div v-if="!store.isAuthenticated">
        <van-empty image="network" image-size="5rem">
          <template #description>
            <router-link to="/login">
              <van-button type="info">请先登录</van-button>
            </router-link>
          </template>
        </van-empty>
      </div>
      <!-- 如果我的知识库列表为空，则显示提示信息-->
      <div v-else-if="myKnowledgeBases.length === 0">
        <van-empty description="搜索不到数据" image="network" image-size="5rem"/>
      </div>
      <div v-else class="display-box-knowledge-base">
        <template v-for="item in myKnowledgeBases">
          <KnowledgeBaseItem :knowledge-base="item"></KnowledgeBaseItem>
        </template>
      </div>
    </div>


    <!-- 文章推荐 -->
    <div class="display-section">
      <span class="title">最新文章</span>
      <van-divider/>
      <!-- 如果推荐文章列表为空，则显示提示信息-->
      <div v-if="recommendedArticles.length === 0">
        <van-empty description="搜索不到数据" image="network" image-size="5rem"/>
      </div>
      <div v-else class="display-box-article">
        <template v-for="item in recommendedArticles">
          <ArticleItem :article="item.article" :knowledge-bases="item.knowledgeBases" :user="item.user"></ArticleItem>
        </template>
      </div>
    </div>
  </div>

  <FooterNav/>
</template>

<style lang="less" scoped>
.app-container {
  padding: 0 .5rem;

  .display-section {
    box-sizing: border-box;
    width: 100%;
    margin: 1rem 0 .5rem;
    padding: .5rem .5rem;
    background-color: #fff;

    [class^="display-box-"] {
      box-sizing: border-box;
      margin-top: .5rem;
      padding: 0;
    }

    .display-box-knowledge-base {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr));
      gap: 1rem;
      width: 100%;

    }

    .display-box-article {
      display: grid;
      grid-gap: .5rem;
    }

    .title {
      padding-left: 0;
      font-weight: bold;
      font-size: 1.2rem;
      font-family: "Microsoft YaHei", serif;
    }
  }
}
</style>